<!--
 * @Description:
 * @version:
 * @Author: 尹鹏孝
 * @Date: 2023-02-21 13:54:07
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2023-02-22 09:45:13
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宫格布局</title>
    <style>
        /* .grid{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-column-gap: 50px;
            grid-row-gap: 20px;
        }
        .item-1 { grid-area: 1 / 3 / 2 / 4; }
        .item-2 { grid-area: 2 / 3 / 3 / 4; }
        .item-3 { grid-area: 1 / 1 / 2 / 2; }
        .item-4 { grid-area:  4 / 3; }
        .item-5 { grid-area: 2 / 1 / 4 / 2; }
        .item-6 { grid-area:  4 / 3; }
        .item-7 { grid-area: 1 / 2 / 3 / 4; }
        .item-8 { grid-area: 2 / 3; }
        .item-9 { grid-area:  3 / 5; } */
        /* .wrapper{
        display:grid;
        grid-template-columns:70% 30%;
    } */
    .c12-1 { grid-area: header; }
    .c12-2 { grid-area: menu; }
    .c12-3 { grid-area: main; }
    .c12-4 { grid-area: right; }
    .c12-5{ grid-area: footer; }
    .wrapper-12{
        display: grid;
        grid-template-columns: repeat(12,1fr);
        grid-row-gap: 20px ;
        grid-column-gap: 30px;
        background-color: azure;
         grid-template-areas:'header header header header header header'
                            'menu main main main right right'
                            'menu footer footer footer footer footer'
    }
    </style>
</head>
<body>
    <!-- zend coding，*多个，$序号，{}内部文本
   <div class="grid">
    <div class="item-1">内内容</div>
    <div class="item-2">内内容</div>
    <div class="item-3">内内容</div>
    <div class="item-4">内内容</div>
    <div class="item-5">内内容</div>
    <div class="item-6">内内容</div>
    <div class="item-7">内内容</div>
    <div class="item-8">内内容</div>
    <div class="item-9">内内容</div>
   </div> -->
   <!-- <div class="wrapper">
    <div style="background-color: bisque;">
www
    </div>
    <div style="background-color: mediumturquoise;">ee</div>
   </div> -->
   <div class="wrapper-12">
    <div class="c12-1">1</div>
    <div class="c12-2">2</div>
    <div class="c12-3">3</div>
    <div class="c12-4">4</div>
    <div class="c12-5">5</div>
    <!-- <div class="c12-6">6</div>
    <div class="c12-7">7</div>
    <div class="c12-8">8</div>
    <div class="c12-9">9</div>
    <div class="c12-10">10</div>
    <div class="c12-11">11</div>
    <div class="c12-12">12</div> -->
   </div>
</body>
</html>